<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>搜索</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<script src="js/config.js"></script>
	<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="js/component.js?v=10"></script>
</head>

<body>
	<div id="app" v-cloak>
		<div class="topss">
			<div class="topssbox">
				<img src="img/index/s.png" />
				<input type="text" placeholder="搜索你感兴趣的课程" class="ss-input" v-model="keyword" @keyup.enter="submit" />
			</div>
			<button class="search-cacel" @click="history.back()">取消</button>
		</div>
		<div class="content">
			<div class="search-cont">
				<template v-if="words.length>0">
					<div class="search-top d-f a-c-c j-c-s">
						<span class="search-topL">搜索历史</span>
						<span class="search-topR" @click="clear">清空搜索历史</span>
					</div>
					<ul class="search-cell">
						<li class="search-cell-list" v-for="word in words" @click="go(word)">{{ word }}</li>
					</ul>
				</template>
				<template v-if="hot.length>0">
					<div class="search-top d-f a-c-c j-c-s">
						<span class="search-topL">热门视频</span>
					</div>
					<ul class="hotvideo">
						<li class="hotvideo-list" v-for="item in hot">
							<a :href="'shipinxuexi.html?id='+item.id">{{ item.title }}</a>
						</li>
					</ul>
				</template>
			</div>
		</div>

		<!-- 通用toast弹窗 -->
		<div class="toast" v-show="toastShow">
			{{toastText}}
		</div>
	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				keyword: '',
				words: [],
				hot: [],

				// 弹窗
				toastText: '',
				toastShow: false,
			},
			mounted() {
				// 从缓存中获取搜索历史
				this.words = JSON.parse(localStorage.getItem('keywords') || '[]');
				// 获取热门视频
				axios.get('/mp/index/hot', { params: { type: 'video' } }).then(e => {
					this.hot = e.data;
				});
			},
			methods: {
				// 清空搜索历史
				clear() {
					this.words = [];
					localStorage.removeItem('keywords');
				},

				// 搜索
				submit() {
					const keyword = this.keyword.trim();
					if ('' === keyword) {
						return this.toast('请输入关键字');
					}
					window.location.href = '/sousuojieguo.html?keyword=' + encodeURIComponent(keyword);
				},

				// 跳转
				go(word) {
					window.location.href = '/sousuojieguo.html?keyword=' + encodeURIComponent(word);
				},

				// 弹窗
				toast(message, time = 3000) {
					this.toastText = message;
					this.toastShow = true;
					setTimeout(() => {
						this.toastShow = false;
					}, time);
				},
			}
		});
	</script>
</body>

</html>